<template>
  <div>
    <!-- 顶部 -->
    <van-nav-bar title="影院"
                 left-text="返回"
                 left-arrow
                 ref="navbar"
                 @click-left='citygo'
                 @click-right='searchgo'>
      <template #left>
        <!--  {{$store.state.cityName}}{{$store.state.cityId}} -->
        <span> {{cityName}}{{cityId}}</span>

        <van-icon name="arrow-down" />

      </template>

      <template #right>
        <van-icon name="search"
                  size="22"
                  color='black' />
      </template>
    </van-nav-bar>

    <!-- 组件 -->
    <cinemadata></cinemadata>
  </div>
</template>
<script> 
import http from '@/util/http'
import BetterScroll from 'better-scroll'
import cinemadata from '@/components/CinemaData'
import { mapState, mapMutations, mapActions } from 'vuex'

export default {
  data () {
    return {
      cinemaList: [],
      height: '0px',
    }
  },
  computed: {
    // mapstate要放在computed,mapMutations,mapActions放在methods
    ...mapState(['cityName', 'cityId'])
  },
  components: {
    cinemadata,

  },
  methods: {
    citygo () {
      this.$router.push('/city')
    },
    searchgo () {
      this.$router.push('/cinema/search')
    }
  },
  mounted () {
    // 这个有个小bug，所以用这种笨方法解决，进入页面自动刷新一下
    if (location.href.indexOf("#reloaded") == -1) {
      location.href = location.href + "#reloaded"
      location.reload()
    }


  },
}
</script>
<style lang="scss" scoped>
// .box {
//   // height 用js来动态赋值，其原理就是整个html的高度减去下面选项卡的高度
//   // document.documentElement.clientHeight - document.getElementsByTagName("footer")[0].offsetHeight + 'px'
//   overflow: hidden;
//   position: relative; //修正滚动条的位置
// }
</style>